<template>
<div class="content-wrapper pl-60 pr-60">
  <div class="fs-24 f-bold f-primary mt-20 mb-30">兼容社区生态，打造核心能力</div>
  <el-tabs class="page-tab" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="tab.title" :name="tab.name"  v-for="(tab,index) in tabList" :key="index">
      <component :is="tab.comp"></component>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
  import PageTab1 from './components/tab1'
  import PageTab2 from './components/tab2'
  import PageTab3 from './components/tab3'
  export default {
    name: 'page1',
    components: {
      PageTab1,
      PageTab2,
      PageTab3
    },
    data () {
      return {
        activeName: '1',
        tabList: [
          { title: 'bug修复', name: '1', comp: 'PageTab1' },
          { title: '性能优化', name: '2', comp: 'PageTab2' },
          { title: '功能添加', name: '3', comp: 'PageTab3' }
        ]
      }
    },
    methods: {
      handleClick () {

      }
    }
  }
</script>

<style scoped lang="scss">
.content-wrapper{
  position: relative;
}
.page-tab{
  /deep/ .el-tabs__header{
    position: absolute;
    top:0px;
    right: 60px;

  }
  /deep/ .el-tabs__nav .el-tabs__item{
    color: rgba(255,255,255,.5)!important;
    font-size: 20px!important;
    &.is-active{
      color: $--color-primary!important;
    }
  }
}
</style>
